<template>
  <div class="loading-box">
    <div class="loading-1">
      <div class="dot" v-for="i in 5" :key="i"></div>
    </div>
    <div class="loading-2">
      <div class="main"/>
    </div>
  </div>
  
</template>
 
<script>
export default {
  name: 'loadingBox',
  data () {
    return {
      msg:''
    }
  }
}
</script>
 
<style scoped lang="scss">
.loading-box {
  display: flex;
  height: calc(100vh - 176px);
  div{width: 50%;}
}
.loading-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
  $colors: #7ef9ff, #89cff0, #4682b4, #0f52ba, #000080;
  animation-delay: 1s;

  .dot {
    position: relative;
    width: 2em;
    height: 2em;
    margin: 0.8em;
    border-radius: 50%;

    &::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: inherit;
      animation: wave 2s ease-out infinite;
    }

    @for $i from 1 through 5 {
      &:nth-child(#{$i}) {
        background: nth($colors, $i);

        &::before {
          animation-delay: $i * 0.2s;
        }
      }
    }
  }
}

@keyframes wave {
  50%,
  75% {
    transform: scale(2.5);
  }

  80%,
  100% {
    opacity: 0;
  }
}

.loading-2{
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  .main{
    position: relative;
    width: 8em;
    height: 8em;
    background: black;
    border-radius: 50%;
    box-shadow: inset 0.5em -0.5em crimson;
    animation: spin 2s linear infinite;

    &::before,
    &::after {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: inherit;
      box-shadow: inherit;
    }

    &::before {
      filter: blur(5px);
    }

    &::after {
      filter: blur(10px);
    }
  }
}


@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
</style>